<template>
	<view>
		<view class="toptd">
			<view class="back">
				<image :src="item.url" mode=""></image>
				<view class="topidbox">
					<view class="title">
						{{item.title}}
					</view>
					<view class="cent">
						{{item.info}}
					</view>
				</view>
				<view class="information">
					<view class="datas">
						已测：{{item.personNum}}人
					</view>
					<view class="datas">
						题目：{{size}}道精选
					</view>
					<view class="datas">
						专业报告：{{size}}页
					</view>
				</view>
			</view>
		</view>
		<view class="butt" @click="sub">
			立即测试
		</view>
		<view class="appraisal">
			<view class="titleb">
				测评介绍
				<view>

				</view>
			</view>
			<view class="appraisalbox">
				<view class="theory">
					理论基础：
				</view>
				<view class="con">
					{{item.testBasic}}
				</view>
			</view>
			<view class="appraisalbox">
				<view class="theory">
					部分参考文献：
				</view>
				<view class="con">
					{{item.testSection}}
				</view>
			</view>
		</view>
		<view class="notice">
			<view class="noticetit">
				评价须知
			</view>
			<view class="connotice">
				<view>
					{{item.testEvaluate}}
				</view>
				<!-- <view>
					2.测试可重复购买，每次付费仅允许测试一次。
				</view>
				<view>
					3.测试完成后可以在“心理测试我的"中随时查看报告。
				</view>
				<view>
					4.有任何疑问，可联系客服小壹协助处理。
				</view> -->
			</view>
		</view>
		<view class="liubai">

		</view>
		<view class="bottomss">
			<view class="left">
				<view class="v1">
					￥{{item.newPrice}}
				</view>
				<view class="v2">
					￥{{item.price}}
				</view>
			</view>
			<view class="right" @click="sub">
				立即测试
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="bottom">
			<view class="popup">
				<view class="poptit">
					<view class="left">
						<view>
						</view>
						心里测试
					</view>
					<view class="right">
						￥{{item.newPrice}}
					</view>
				</view>
				<view class="redb">
					<view class="left">
						优惠券
					</view>
					<view class="right">
						暂无优惠券 <u-icon name="arrow-right" size='15' color='#999'></u-icon>
					</view>
				</view>
				<view class="poptit" style="border-top: 1rpx solid #eee;">
					<view class="left">
						<view>
						</view>
						支付方式
					</view>
				</view>
				<view class="modes">
					<view class="left">
						<image src="../../static/userSide/wx.png" mode=""></image>
						<view>
							微信支付
						</view>
					</view>
					<view class="">
						<radio value="" checked="true" color="#2B7BED" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="buts" @click="confirms">
					确认付款
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		testInfo,
		getTopicInfo,
		createTestOrder
	} from '../../api/api.js'
	import {
		miniAppPay
	} from '../../api/pay.js'
	export default {
		data() {
			return {
				show: false,
				isRead: false,
				id: null,
				item: null,
				topic: [],
				size: 0
			};
		},
		onLoad(option) {
			if (option.id) {
				console.log(option.id)
				this.id = option.id
				this.getInfo(option.id)
				this.getTopic(option.id)
			}
		},
		methods: {
			confirms() {
				let data = {
					price: this.item.newPrice,
					couponId: null,
					topicId: this.item.id,
					title: this.item.title,
					payType: '1', //支付方式微信支付
					orderCategory: '0', //订单类型咨询订单
					actualPrice: this.pricek, //实付金额
					openId: this.$store.state.userInfo.wxInfo.openId //唯一id
				}

				let that = this

				miniAppPay(data).then(ress => {
					uni.requestPayment({
						timeStamp: ress.data.timeStamp,
						nonceStr: ress.data.nonceStr,
						package: ress.data.package,
						signType: ress.data.signType,
						paySign: ress.data.sign,
						success: function(res) {
							uni.showToast({
								title: '支付成功',
								icon: 'success'
							})

							uni.redirectTo({
								//url: '/pages/userSide/quiz?id=' + that.id
								url: '/pages/userSide/quiz?id=' + this.id + '&topicType=' + this.item.customType // this.item.customType
							})
						},
						// 参数有问题则抛出错误
						fail: function(err) {
							//跳转订单详情 关闭所有页面跳转
							uni.showToast({
								title: '支付失败',
								icon: 'error'
							})
							let data = {
								orderStatus: 0
							}
							uni.navigateTo({
								url: '/pages/myorder/myorder?data=' + encodeURIComponent(JSON
									.stringify(data)),
							});
						},
					})
				})
			},
			sub() {
				//  todo 测题支付 测试代码后期删除 LHW_TODO START
				uni.redirectTo({
					url: '/pages/userSide/quiz?id=' + this.id + '&topicType=' + this.item.customType // this.item.customType
				})
				return;
				// LHW_TODO START		END
				if (this.size === 0) {
					uni.showToast({
						title: '题库暂时为空!',
						icon: 'error'
					})
					this.show = false
				} else {
					this.show = true
				}
			},
			getTopic(topicId) {
				getTopicInfo({
					topicId: topicId
				}).then(res => {
					if (res.data.length !== 0) {
						this.size = res.data.length
					}
				})
			},
			getInfo(data) {
				testInfo(data).then(res => {
					this.item = res.data
				})
			},
			radioChange(evt) {
				let self = this;
				self.isRead = !self.isRead;
				console.log('isRead', this.isRead);
			},

			checkboxChange(e) {
				console.log(e);
			},
			open() {},
			close() {
				this.show = false
			}
		}
	}
</script>


<style lang="scss">
	.uni-checkbox-input {
		border-radius: 100upx;
	}

	.popup {
		padding: 10rpx 30rpx;

		.poptit {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 30rpx;

			.left {
				font-size: 36rpx;
				color: #333;
				display: flex;
				align-items: center;
				font-weight: bold;

				view {
					background-color: #49AAF5;
					width: 14rpx;
					height: 34rpx;
					margin-right: 15rpx;
				}
			}

			.right {
				font-size: 44rpx;
				color: #666;
				font-weight: bold;
			}

		}

		.redb {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 60rpx 0;

			.left {
				font-size: 28rpx;
				color: #333;
			}

			.right {
				font-size: 28rpx;
				color: #333;
				display: flex;
				align-items: center;
			}

			.right2 {
				color: #FF1A00;
				font-size: 44rpx;
				font-weight: bold;
			}
		}

		.modes {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 60rpx 0;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				view {
					color: #333;
					font-size: 28rpx;
				}
			}
		}

		.buts {

			width: 85vw;
			line-height: 88rpx;
			background-image: linear-gradient(to right, #49AAF5, #2988D2);
			color: #fff;
			font-size: 36rpx;
			text-align: center;
			border-radius: 200rpx;
			margin: 0 auto 30rpx;
		}
	}

	.toptd {
		.back {
			image {
				width: 100vw;
				height: 280rpx;
			}

			position:relative;

			.topidbox {
				width: 80vw;
				position: absolute;
				text-align: center;
				left: 50%;
				top: 80rpx;
				transform: translate(-50%, 0);
				color: #fff;

				.title {
					width: 80vw;
					font-size: 32rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.cent {
					width: 80vw;
					margin-top: 25rpx;
					font-size: 24rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;

				}
			}

			.information {
				width: 92vw;
				display: flex;
				justify-content: space-around;
				background-color: #fff;
				border-radius: 15rpx;
				position: absolute;
				left: 50%;
				bottom: -30rpx;
				transform: translate(-50%, 0);
				padding: 30rpx 0;

				.datas {
					width: 30vw;
					text-align: center;
					color: #666;
					font-size: 24rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;

				}
			}
		}
	}

	.butt {
		width: 360rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 36rpx;
		line-height: 88rpx;
		text-align: center;
		margin: 80rpx auto;
		background-image: linear-gradient(to right, #49AAF5, #2988D2);
	}

	.appraisal {
		width: 92vw;
		margin: 0 auto;

		.titleb {
			width: 130rpx;
			margin: 0 auto 80rpx;
			color: #333;
			font-size: 32rpx;
			font-weight: bold;
			position: relative;

			view {
				position: absolute;
				width: 100%;
				height: 10rpx;
				background-color: #1989E1;
				z-index: -3;
				left: 0;
				bottom: 0;
			}
		}

		.appraisalbox {
			margin-bottom: 80rpx;

			.theory {
				font-size: 24rpx;
				color: #333;
				font-weight: bold;
				margin: 30rpx 0;
			}

			.con {
				line-height: 50rpx;
				font-size: 24rpx;
				color: #999;
			}
		}
	}

	.notice {
		width: 92vw;
		margin: 30rpx auto;
		padding: 30rpx;
		background-color: #FFF9F4;

		.noticetit {
			font-size: 28rpx;
			color: #333;
		}

		.connotice {
			margin: 20rpx 0;
			font-size: 24rpx;
			color: #666;

			view {
				margin: 20rpx 0;
			}
		}
	}

	.liubai {
		height: 150rpx;
	}

	.bottomss {
		width: 100vw;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 20rpx 20rpx 35rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;

		.left {
			display: flex;
			align-items: center;

			.v1 {
				color: #FF1A00;
				font-size: 44rpx;
				margin-right: 15rpx;
			}

			.v2 {
				color: #999999;
				font-size: 22rpx;
				text-decoration: line-through;
			}
		}

		.right {
			width: 280rpx;
			text-align: center;
			line-height: 80rpx;
			background-image: linear-gradient(to right, #49AAF5, #2988D2);
			border-radius: 100rpx;
			color: #fff;
		}
	}
</style>
